<template>
<div>
<!--  真题演练{{subject_id}}{{currentItem}}{{tabsActiveName}}-->
  <el-tabs v-model="tabsActiveName" class="demo-tabs">
    <el-tab-pane v-for="item in subjectTabs" :label="item.name" :name="String(item.id)">
      <div v-if="topicDrillList && topicDrillList.rows && topicDrillList.rows.length">
        <div v-for="item in topicDrillList.rows">
          <el-row class="model" style="margin-bottom: 20px;padding:10px" justify="space-between">
            <el-col :span="6">
              <img style="width: 100%" :src="item.bannerPic" alt="" />
            </el-col>
            <el-col :span="17">
              <div
                      style="
                  display: flex;
                  justify-content: space-between;
                  height: 100%;
                "
              >
                <div
                        style="
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    height: 100%;
                  "
                >
                  <p style="font-size: 16px;font-weight: bold">{{ item.type }}</p>
                  <p style="font-size: 14px">{{ item.name }}</p>
                  <div style="font-size: 14px" v-html="item.describe"></div>
                </div>
                <div style="display: flex; align-items: center">
                  <el-button
                          size="large"
                          type="primary"
                          @click="toTopicDrill(item)"
                  >开始做题</el-button
                  >
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-empty v-else description="暂无数据" />
      <el-row class="model">
        <div class="ExerciseTab">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="做题历史" name="default">
              <div v-if="topicDrillLogList && topicDrillLogList.rows && topicDrillLogList.rows.length">
                <div v-for="item in topicDrillLogList.rows">
                  <div @click="lookTopicDril(item)" class="ExerciseItem">
                    <div>
                      <span class="name">{{item.name}}</span>
                    </div>
                    <div class="exam_history">
                      <span>{{ proxy.$filters.dateTimeFormat(item.updatedAt) }}</span>
                      <span>正确率:{{item.correctS ? item.correctS:0}}%</span>
                      <span>客观题得分:{{item.objectiveScore}}</span>
                      <span>总分:{{item.totalScore}}</span>
                      <span style="color: rgba(11, 67, 128, 1);">{{item.fraction == null ? '未完成':'已完成'}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <el-empty v-else description="暂无数据" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-row>
      <el-row class="model">
        <div v-if="topicDrillLogList.pagination">
          <el-pagination
                  background
                  v-model:currentPage="currentPage"
                  :page-size="pageSize"
                  layout="total, prev, pager, next"
                  :total="topicDrillLogList.pagination.count"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
          />
        </div>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
  import goBackHistory from "../../../utils/hook/goBackHistory";
  import {reactive,toRefs,getCurrentInstance,watch} from 'vue'
  import {createdTestPaper,subjectList,createdTestPaperReal} from "@/api/api";
  import {testPaperLogList} from "../../../api/api";
  import {useRouter} from "vue-router";
  import {ElMessage, ElMessageBox} from 'element-plus'

export default {
  name: "index",
  props:{
    subject_id:{
      type:Number
    },
    subject_name: {
      type:String,
      default:''
    },
    currentItem:{
      type:String
    },
    activeCourse:{
      type:String
    }
  },
  setup(props,{emit}){
    let router = useRouter();
    const { proxy } = getCurrentInstance()
    let data = reactive({
      subjectName:'',
      subjectTabs:[],
      tabsActiveName:null,
      pageSize:10,
      currentPage:1,
      activeName:'default',
      topicDrillList:[],//真题演练列表
      topicDrillLogList:[],//真题演练做题历史列表
    })

    //科目列表
    let getAllSubjectList = () =>{
      let course_id = localStorage.getItem('activeCourse')
      subjectList({courseID:course_id}).then(res =>{
        console.log('科目列表',res)
        data.subjectTabs = res.data;
        data.tabsActiveName = String(res.data[0].id)
      })
    }
    getAllSubjectList();

    //真题演练列表
      let CreatedTestPaper = () =>{
        createdTestPaper({subjectID:Number(data.tabsActiveName),type:'真题演练'}).then(res =>{
          console.log('真题演练',res)
          data.topicDrillList = res.data
        })
      }
      CreatedTestPaper();

    //做题历史列表
    let getTestPaperLogList = () =>{
      testPaperLogList({type:'真题演练',subjectID:Number(data.tabsActiveName),page:data.currentPage,pageSize:data.pageSize}).then(res =>{
        console.log('真题演练做题历史列表',res)
        data.topicDrillLogList = res.data
      })
    }

    //跳转至真题演练
    let toTopicDrill = (item) =>{
      ElMessageBox.confirm(
              `本场练习共${item.maxTopicNum}题，总时长${Number.parseInt(item.scopeTime / 60)}分钟`,
              '温馨提示',
              {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
              }
      )
              .then(() => {
                let params = router.currentRoute.value;
                let currentItem = props.currentItem;
                goBackHistory.addCurrentPageParams(params,currentItem);
                router.push({name:'TopicDrill',params:{subject_name:props.subject_name,id:item.id,method:'createdTestPaperReal',fraction:'null',scopeTime:item.scopeTime}})
              })
              .catch(() => {
                ElMessage({
                  type: 'info',
                  message: '已取消',
                })
              })
    }

    const handleSizeChange = (val) => {
      console.log(`${val} items per page`);
      data.pageSize = val;
      getTestPaperLogList();
    }
    const handleCurrentChange = (val) => {
      console.log(`current page: ${val}`)
      data.currentPage = val;
      getTestPaperLogList();
    }

    let lookTopicDril = (item) =>{
      if(item.fraction == null){
        ElMessageBox.confirm(
                '是否继续上次未完成的试卷？',
                '温馨提示',
                {
                  confirmButtonText: '继续作答',
                  cancelButtonText: '退出',
                  type: 'warning',
                }
        )
                .then(() => {
                  let params = router.currentRoute.value;
                  let currentItem = props.currentItem;
                  goBackHistory.addCurrentPageParams(params,currentItem)
                  router.push({name:'TopicDrill',params:{subject_name:props.subject_name,id:item.id,method:'testPaperDetailLog',fraction:item.fraction == null ? 'null':item.fraction,scopeTime:item.scopeTime}})
                })
                .catch(() => {

                })
      }else{
        router.push({name:'TopicDrill',params:{subject_name:props.subject_name,id:item.id,method:'testPaperDetailLog',fraction:item.fraction == null ? 'null':item.fraction,scopeTime:item.scopeTime}})
      }
    }

    watch(() => data.tabsActiveName,() =>{
      if(data.tabsActiveName){
        data.subjectName = data.subjectTabs.filter(item => item.id == Number(data.tabsActiveName))[0].name;
        emit('changeSubjectName',data.subjectName);
        CreatedTestPaper();
        getTestPaperLogList();
      }
    })

    watch(() => props.activeCourse,() =>{
      getAllSubjectList();
    })

    return{
      proxy,
      lookTopicDril,
      handleSizeChange,
      handleCurrentChange,
      toTopicDrill,
      ...toRefs(data),
        CreatedTestPaper,
      getTestPaperLogList
    }
  }
}
</script>

<style scoped>
  .model{
    margin-bottom: 20px;
  }
  .exam_history :not(:last-child){
    margin-right: 20px;
  }
  .exam_history :not(:first-child){
    font-weight: 400;
    font-size: 12px;
    color: rgba(153, 153, 153, 1);
  }
  .exam_history :first-child{
    font-size: 12px;
    color: rgba(153, 153, 153, 1);
  }
  .ExerciseItem .name{
    color: rgba(11, 67, 128, 1);
    font-size: 14px;
    font-weight: 400;
  }
  .ExerciseTab{
    width: 100%;
  }
  .ExerciseItem{
    display: flex;
    justify-content: space-between;
    padding: 5px 20px;
    background-color:  rgba(248, 248, 248, 1);
    margin-bottom: 10px;
    border-radius: 10px;
    cursor: pointer;
  }
  .ExerciseTab{
    margin-bottom: 20px;
  }
</style>
